<template>
    <div class="right">
        <div class="tab">
            <div class="tabLeft" @click="tabLeftClick()" :class='{tabOk:!tabOkShow}'>
                控件设置
                <div class="triangle" v-show='!tabOkShow'></div>
            </div>
            <div class="tabRight" @click="tabRightClik()" :class='{tabOk:tabOkShow}'>
                表单设置
                <div class="triangle" v-show='tabOkShow'></div>
            </div>
        </div>
        <div class="froms" v-show='tabOkShow'>
            <div class="fromFont">
                审批名称 最多6个字
            </div>
            <input class="inp" maxlength="6" v-model='fromNameVal' type="text">
            <div class="fromFont">
                审批说明 最多100个字
            </div>
            <textarea maxlength="100" v-model='fromExplainVal'></textarea>
            <div class="fromFont">
                审批图标
            </div>
            <div class="fromLogo">
                <ul class="iconBorder">
                    <li class="iconLi" :class="{iconLiBor:iconShow == index}" v-for="(item,index) in iconList" :key='item' @click="iconClick(index)">
                        <img :src="item" alt="">
                        <div class="icontrueBox" v-show="iconShow == index">
                            <div class="icontrue">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div v-show='!tabOkShow && type != "" '>
            <div class="fromFont" v-show="type != 8">
                <span class="title">标题</span>
                <span class="titles">最多输入6个字</span>
            </div>
            <input v-show="type != 8" class="inp" v-model="titleVal" maxlength="6" type="text">
            <div class="fromFont" v-show="type == 8">
                <span class="title">说明文字</span>
                <span class="titles">最多输入15个字</span>
            </div>
            <input v-show="type == 8" class="inp" v-model="hintVal" maxlength="15" type="text">
            <div v-show="type == 5" class="fromFont">
                <span class="title"> 标题2</span>
                <span class="titles">最多输入6个字</span>
            </div>
            <input v-show="type == 5" class="inp" v-model="titleVals" maxlength="6" type="text">
            <div class="fromFont" v-show="type != 7 && type != 8 ">
                <span class="title">提示文字</span>
                <span class="titles">最多输入9个字</span>
            </div>
            <input class="inp" v-show="type != 7 && type != 8 " v-model="hintVal" maxlength="9" type="text">
            <div class="fromFont" v-show="type == 3 ">
                <span class="title">选项</span>
                <span class="titles">最多100项，每项最多15个字</span>
            </div>
            <ul class="optionUl" v-show="type == 3 ">
                <li class="optionLi" v-for='(item,index) in optionList' :key="index">
                    <input class="optionInp" v-model='item.value' @input="optionChg()" type="text" maxlength="15">
                    <div @click="optionSubtractClick(index)" class="optionSubtract" :class="{grayBack:optionList.length == 1}">－</div>
                    <div @click="optionAddClick(index)" class="optionAdd" :class="{grayBack:optionList.length == 100}">＋</div>
                </li>
            </ul>
            <div class="fromFont" v-show="type == 5 || type == 4 ">
                <span class="title">日期类型</span>
            </div>
            <div class="time" v-show="type == 5 || type == 4 " @click="dateClick()">
                <div class="round" :class="{okBorder:timeShow}">
                    <div class="dot" v-show='timeShow'></div>
                </div>
                <div class="title">年-月-日 时:分</div>
            </div>
            <div class="time" v-show="type == 5 || type == 4 " @click="timeClick()">
                <div class="round" :class="{okBorder:!timeShow}">
                    <div class="dot" v-show='!timeShow'></div>
                </div>
                <div class="title">年-月-日</div>
            </div>
            <div class="fromFont" v-show="type != 7 && type != 8 ">
                <span class="title">验证</span>
            </div>
            <div class="required" v-show="type != 7 && type != 8 " @click="requiredClick()">
                <div class="requiredBox" :class="{okBorder:requiredShow,okBack:requiredShow}">
                    <div class="requiredOk" v-show="requiredShow"></div>
                </div>
                <div class="title">必填</div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        data() {
            return {
                tabOkShow: true, //tab切换
                timeShow: true, //时间选择
                requiredShow: false, // 是否必填
                type: "", //组件标识
                fromNameVal: "", //审批名称
                fromExplainVal: "", //审批说明
                iconList: [], //图标
                iconShow: "-1",//图标选择标识
                titleVal: "", //标题
                titleVals: "", //标题2
                hintVal: "", //提示文字
                optionList: [], //单选项
                insideOutside: "", //内部和外部组件的判断
                index: "", //外部索引
                ind: "" //内部索引
            };
        },
        created: function () {
            var self = this;
            drag.$on("moverUpFun", function (obj) {
                //组件选中
                self.insideOutside = obj.insideOutside;
                self.index = obj.index;
                self.ind = obj.ind;
                self.tabOkShow = false;
                if (obj.insideOutside == "outside") {
                    //外面的
                    let objs = obj.list[obj.index];
                    self.type = objs.dataType ? objs.dataType : "";
                    self.titleVal = objs.formLabel;
                    self.titleVals = objs.formLabels;
                    self.hintVal = objs.help;
                    if (objs.dataType == 3) {
                        if (objs.optValue) {
                            self.optionList = [];
                            objs.optValue.split(",").forEach(ele => {
                                self.optionList.push({ value: ele });
                            });
                        }
                    }
                    if (objs.dataFormat) {
                        self.timeShow =
                            objs.dataFormat == "yyyy-MM-dd HH:mm" ? true : false;
                    }
                    self.requiredShow = objs.isRequired == 1 ? true : false;
                } else if (obj.insideOutside == "inside") {
                    //明细的
                    let objs = obj.list[obj.index].child[obj.ind];
                    self.type = objs.dataType;
                    self.titleVal = objs.formLabel;
                    self.titleVals = objs.formLabels;
                    self.hintVal = objs.help;
                    if (objs.dataType == 3) {
                        if (objs.optValue) {
                            self.optionList = [];
                            objs.optValue.split(",").forEach(ele => {
                                self.optionList.push({ value: ele });
                            });
                        }
                    }
                    if (objs.dataFormat) {
                        self.timeShow =
                            objs.dataFormat == "yyyy-MM-dd HH:mm" ? true : false;
                    }
                    self.requiredShow = objs.isRequired == 1 ? true : false;
                }
            });
            if (self.$route.query.upData == 'edit') {
                let obj = JSON.parse(self.$route.query.upList)
                self.fromNameVal = obj.modelName//审批名称
                self.fromExplainVal = obj.introduce //审批说明
            }
            self.getapprovalmodelgetlogo(
            ).then(data => {
                if (data.statusCode == 200) {
                    if (data.data) {
                        self.iconList = data.data;
                        if (self.$route.query.upData == 'edit') {
                            let obj = JSON.parse(self.$route.query.upList)
                            let logoIcon = obj.logo
                            for (var i = 0; i < self.iconList.length; i++) {
                                if (self.iconList[i] == logoIcon) {
                                    self.iconShow = i;
                                    sessionStorage.setItem("settingIconurl", this.iconList[i]);
                                }
                            }
                        }
                    }
                } else if (data.statusCode == "200003") {
                    self.$message({
                        type: "info",
                        message: data.statusMessage
                    });
                    this.$router.push({
                        path: "/login"
                    });
                } else {
                    self.$message(data.statusMessage);
                }
            }).catch(msg => {
                self.$message("服务器异常");
            });
        },
        methods: {
            //控件设置
            tabLeftClick() {
                this.tabOkShow = false;
            },
            //表单设置
            tabRightClik() {
                this.tabOkShow = true;
            },
            //添加单选项
            optionAddClick(index) {
                if (this.optionList.length < 100) {
                    let obj = { value: "选项" + (this.optionList.length + 1) };
                    this.optionList.splice(index + 1, 0, obj);
                    let optArr = [];
                    this.optionList.forEach(ele => {
                        optArr.push(ele.value);
                    });
                    let potStr = optArr.join(",");
                    let valObj = {
                        insideOutside: this.insideOutside,
                        index: this.index,
                        ind: this.ind,
                        value: potStr
                    };
                    drag.$emit("editOptionFun", valObj);
                }
            },
            //删除单选项
            optionSubtractClick(index) {
                if (this.optionList.length > 1) {
                    this.optionList.splice(index, 1);
                    let optArr = [];
                    this.optionList.forEach(ele => {
                        optArr.push(ele.value);
                    });
                    let potStr = optArr.join(",");
                    let valObj = {
                        insideOutside: this.insideOutside,
                        index: this.index,
                        ind: this.ind,
                        value: potStr
                    };
                    drag.$emit("editOptionFun", valObj);
                }
            },
            //单选项修改名称
            optionChg() {
                let optArr = [];
                this.optionList.forEach(ele => {
                    optArr.push(ele.value);
                });
                let potStr = optArr.join(",");
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: potStr
                };
                drag.$emit("editOptionFun", valObj);
            },
            //时间年月日时分
            dateClick() {
                this.timeShow = true;
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: "yyyy-MM-dd HH:mm"
                };
                drag.$emit("editOptimeFun", valObj);
            },
            //时间年月日
            timeClick() {
                this.timeShow = false;
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: "yyyy-MM-dd"
                };
                drag.$emit("editOptimeFun", valObj);
            },
            //必填
            requiredClick() {
                this.requiredShow = !this.requiredShow;
                if (this.requiredShow == true) {
                    let valObj = {
                        insideOutside: this.insideOutside,
                        index: this.index,
                        ind: this.ind,
                        value: 1
                    };
                    drag.$emit("editRequiredFun", valObj);
                } else {
                    let valObj = {
                        insideOutside: this.insideOutside,
                        index: this.index,
                        ind: this.ind,
                        value: 0
                    };
                    drag.$emit("editRequiredFun", valObj);
                }
            },
            // 图标选择
            iconClick(index) {
                this.iconShow = index;
                drag.$emit("iconClickFun", this.iconList[index]);
            },
            ...mapActions(["getapprovalmodelgetlogo"])
        },
        watch: {
            fromNameVal: function (val) {
                //审批名称
                drag.$emit("editNameFun", val);
            },
            fromExplainVal: function (val) {
                //审批说明
                drag.$emit("editExplainFun", val);
            },
            titleVal: function (val) {
                //标题
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: val
                };
                drag.$emit("editTitleFun", valObj);
            },
            titleVals: function (val) {
                //标题2
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: val
                };
                drag.$emit("editTitlesFun", valObj);
            },
            hintVal: function (val) {
                //提示文字
                let valObj = {
                    insideOutside: this.insideOutside,
                    index: this.index,
                    ind: this.ind,
                    value: val
                };
                drag.$emit("edithintFun", valObj);
            }
        }
    };
</script>
<style scoped>
    .right {
        width: 320px;
        min-height: 620px;
        border-radius: 4px;
        background: white;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .tab {
        height: 32px;
        width: 290px;
        border-bottom: 1px solid #38adff;
        color: #303030;
        display: flex;
    }

    .tab>div {
        width: 99px;
        height: 28px;
        border-radius: 2px;
        line-height: 28px;
        font-size: 15px;
        text-align: center;
        color: rgb(0, 0, 0);
        position: relative;
        cursor: pointer;
    }

    .triangle {
        width: 1px;
        height: 1px;
        background: #38adff;
        border-right: 3px solid #38adff;
        border-bottom: 3px solid #38adff;
        border-left: 3px solid #38adff;
        border-top: 3px solid #38adff;
        transform: rotate(45deg);
        position: absolute;
        bottom: -2px;
        left: 45px;
    }

    .tabOk {
        background: #38adff !important;
    }

    textarea {
        font-size: 12px;
        padding: 6px 10px;
        width: 276px;
        height: 80px;
        border: 1px solid #38adff;
        border-radius: 4px;
        resize: none;
    }

    .fromFont {
        font-size: 12px;
        margin-bottom: 12px;
        padding-left: 2px;
        margin-top: 24px;
    }

    .inp {
        border: 1px solid #38adff;
        background: hsla(0, 0%, 100%, 0.1);
        color: #303030;
        padding: 6px 10px;
        width: 276px;
        border-radius: 4px;
        outline: none;
        font-size: 12px;
    }

    .optionLi {
        display: flex;
        margin: 16px 0;
    }

    .optionInp {
        background: hsla(0, 0%, 100%, 0.1);
        border: 1px solid hsla(0, 0%, 100%, 0.6);
        color: #303030;
        padding: 6px 10px;
        width: 200px;
        height: 16px;
        border-radius: 4px;
        outline: none;
        font-size: 12px;
        border: 1px solid #38adff;
    }

    .optionSubtract,
    .optionAdd {
        width: 18px;
        height: 18px;
        color: white;
        background: rgb(71, 71, 71);
        margin: 5px 0 0 6px;
        cursor: pointer;
        border-radius: 100%;
        font-size: 18px;
        line-height: 16px;
        text-align: center;
    }

    .optionSubtract:hover,
    .optionAdd:hover {
        background: #000;
    }

    .grayBack {
        background: rgb(71, 71, 71) !important;
        cursor: no-drop !important;
    }

    .title {
        font-size: 12px;
        color: #000;
    }

    .titles {
        color: #6e6e6e;
    }

    .time,
    .required {
        margin-top: 24px;
        display: flex;
        cursor: pointer;
        width: 100px;
    }

    .round {
        width: 11px;
        height: 11px;
        border-radius: 100%;
        border: 1px solid #c1c1c1;
        margin: 1px 6px 0 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .time:hover>.round {
        border: 1px solid #38adff !important;
    }

    .dot {
        width: 5px;
        height: 5px;
        background: #38adff;
        border-radius: 100%;
    }

    .requiredBox {
        width: 12px;
        height: 12px;
        border: 1px solid #c1c1c1;
        border-radius: 3px;
        margin: 1px 6px 0 3px;
        position: relative;
    }

    .required:hover>.requiredBox {
        border: 1px solid #38adff !important;
    }

    .requiredOk {
        position: absolute;
        top: 1px;
        left: 3px;
        width: 3px;
        height: 7px;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(45deg);
    }

    .okBack {
        background: #38adff !important;
    }

    .okBorder {
        border: 1px solid #38adff !important;
    }

    .iconBorder {
        display: flex;
        flex-wrap: wrap;
    }

    .iconLi {
        width: 45px;
        height: 45px;
        margin: 5px;
        padding: 3px;
        border: 1px solid white;
        position: relative;
        border-radius: 6px;
    }

    .iconLiBor {
        border: 1px solid rgba(0, 140, 255, 0.897);
    }

    .iconLi img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }

    .icontrueBox {
        width: 20px;
        height: 20px;
        background: rgba(0, 140, 255, 1);
        position: absolute;
        top: 3px;
        right: 3px;
        border-radius: 100%;
    }

    .icontrue {
        width: 4px;
        height: 10px;
        border-bottom: 2px solid white;
        border-right: 2px solid white;
        position: absolute;
        transform: rotate(45deg);
        top: 3px;
        left: 7px;
    }
</style>